<template>
	<view class="box">

		<z-paging ref="paging" v-model="dataList" @query="queryList">

			<view class="navbar">

				<u-navbar :safeAreaInsetTop="true" bgColor="#FFFFFF" rightIcon="more-dot-fill" :autoBack="true"
					:placeholder="true" @rightClick="navtabsRightClick" @leftClick="navtabsLeftClick">
					<view slot="center"></view>
				</u-navbar>

			</view>

			<view class="box-pading">

				<!-- 头像部分 -->
				<view class="head flex-no-horizontal">

					<view class="head-right flex-no-horizontal" @click="toUserInfo">
						<view class="head-right-icon">
							<u--image :src="detail.avatar" width="40" height="40" shape="circle"></u--image>
						</view>
						<view class="head-right-name-time">
							<view class="name flex-no-horizontal" :style="{'font-size':detail.username.length > 12 ? '11px' : '16px'}">
								{{detail.username}}
								<!-- <image src="../../static/logo.png" mode=""></image> -->
							</view>
							<view class="time">
								{{detail.createAt | date}}
							</view>
						</view>
					</view>

					<view class="head-left flex-no-horizontal" @click="followClick">

						<view class="head-left-content flex-no-horizontal" v-if="!ifFollow">
							<u-icon name="plus" color="#000" size="18" style="margin-right: 10rpx;"></u-icon>
							<view>关注</view>
						</view>

						<view class="head-left-content-succ flex-no-horizontal" v-else>
							<view>已关注</view>
						</view>

					</view>

				</view>

				<!-- 文字部分 -->
				<view class="content-text">
					{{detail.text}}
				</view>

				<!-- 图片部分 -->
				<view class="content-img-single" :class="{'content-img-multiple':detail.fileName.length !== 1}">
					<image :src="item" v-for="(item,index) in detail.fileName" :key="index" :mode="detail.fileName.length !== 1 ? 'aspectFill' : 'widthFix' " @click="previewImg(detail.fileName, index)"></image>
				</view>

				<!-- 评论部分 -->
				<view class="comment">

					<view class="comment-head flex-no-horizontal">
						<view class="comment-head-left">
							全部评论
							<text>{{commentNum}}</text>
						</view>
						<!-- <view class="comment-head-right flex-no-horizontal">
							<view class="comment-head-right-hot flex-no-horizontal"
								:class="{'comment-head-right-new':!commentSort}" @click="commentSortClick(true)">
								最热
							</view>
							<view class="comment-head-right-hot flex-no-horizontal"
								:class="{'comment-head-right-new':commentSort}" @click="commentSortClick(false)">
								最新
							</view>
						</view> -->
					</view>

					<commentItem v-for="(item,index) in dataList" :key="item.id" :record="item"></commentItem>

				</view>

				<!-- 输入部分 -->
				<view class="bottom-input flex-no-horizontal">

					<view class="input flex-no-horizontal">
						<input type="text" v-model="commentText" value="" :placeholder="'回复@' + detail.username"
							@confirm="commentAdd" />
					</view>

					<view class="bottom-input-right flex-no-horizontal" @click="commentAdd">
						发送
					</view>

					<!-- <view class="bottom-input-right flex-no-horizontal" @click="likeClick">
						<u-icon name="thumb-up" :color=" detail.isLike ? 'rgba(74, 188, 90, 1)' :'#F0F0F0'" size="36"></u-icon>
						<view>{{detail.likeNum}}</view>
					</view> -->

				</view>

				<view style="height: 100rpx;"></view>

			</view>

		</z-paging>


		<u-picker :show="pickerShow" :columns="pickerList" :closeOnClickOverlay="true" @close="pickerShow = false"
			@cancel="pickerShow = false" @confirm="pickerConfirm"></u-picker>

		<!-- 分享弹窗 -->
		<view>
			<sharePopup :record="detail" :wechatPopupShow="wechatPopupShow" @wechatPopupFun="wechatPopupFun"></sharePopup>
		</view>

		<!-- 举报弹窗 -->
		<complaint :PopupShow="complaintShow" :articleId="detail.id" @closeComplaint="closeComplaint"></complaint>

	</view>
</template>

<script>
	import {
		communityCommentListApi,
		communityCommentAddApi,
		communityGiveLikeApi,
		communityCancelLikeApi,
		communityAppealAddApi,
		communityDetailApi,
		userIfFollowApi,
		userFollowAddApi
	} from '../../api/index.js'
	import commentItem from './common/comment.vue'
	import sharePopup from './common/share.vue'
	import complaint from './common/complaint.vue'
	import {previewImage} from '../../utility/download.js'
	export default {
		components: {
			commentItem,
			sharePopup,
			complaint
		},
		data() {
			return {
				dataList: [],
				ifFollow: false, //是否关注
				ifLike: false, //点赞
				pickerShow: false, //选择器
				pickerList: [ //选择器数据
					['分享', '举报']
				],
				id: '', //动态id
				commentText: '', //评论内容
				commentSort: true, //true 最热，false 最新
				test: [{
					commentUserAvatar: '',
					content: '测试评论内容',
					count: 0,
					createdAt: '1581170184',
					id: 1,
				}],
				detail: {
					avatar: '',
					createAt: '',
					fileName: '',
					id: 0,
					plate: '',
					status: '',
					text: '',
					thumbnail: '',
					userId: '',
					username: '',
				},
				commentNum:'',		//评论数
				wechatPopupShow:false,		//微信分享弹窗
				complaintShow:false,		//举报弹窗
			};
		},
		computed: {

		},
		onLoad(e) {
			this.id = e.id || ''
		},
		methods: {

			//导航栏右侧点击
			navtabsRightClick() {
				this.pickerShow = !this.pickerShow
			},

			//导航栏左侧点击
			navtabsLeftClick(){
				uni.$emit('detailBlack')
			},

			//选择器确定
			async pickerConfirm(e) {
				try {
					console.log(e)
					switch (e.indexs[0]) {
						case 0:
							//分享
							this.wechatPopupShow = true
							break;
						case 1:
							//举报
							this.complaintShow = true
							break;
					}
					this.pickerShow = !this.pickerShow
				} catch (e) {
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
					//TODO handle the exception
				}
			},
			//关注点击
			async followClick() {
				try{
					const res = await userFollowAddApi({
						beFollowId:this.detail.userId,
						following:!this.ifFollow ? true : false
					})
					//获取是否关注
					const ifFollowRes = await userIfFollowApi({
						mid: this.detail.userId
					})
					this.ifFollow = ifFollowRes.data.is_follow
					uni.showToast({
						title:'操作成功',
						icon:'none'
					})
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
				}

			},

			//点赞点击
			async likeClick() {
				try {
					if (!this.detail.isLike) {
						//点赞
						const res = await communityGiveLikeApi({
							articleId: this.detail.id, //发布动态 id
							authorId: this.detail.userId, //发布动态作者 id
						})

						this.detail.isLike = 1
						this.detail.likeNum = this.detail.likeNum + 1

						uni.showToast({
							title:'点赞成功',
							icon:'none'
						})

					} else {
						//取消点赞
						const res = await communityCancelLikeApi({
							articleId: this.detail.id, //发布动态 id
						})

						this.detail.isLike = 0
						this.detail.likeNum = this.detail.likeNum - 1

						uni.showToast({
							title:'取消点赞',
							icon:'none'
						})
					}

				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
				}
			},

			//评论添加
			async commentAdd() {
				try {
					if(this.commentText === ''){
						uni.showToast({
							title:'请输入评论内容',
							icon:'none'
						})
						return
					}

					const res = await communityCommentAddApi({
						content: this.commentText,
						articleId: this.detail.id, //文章id
						authorId: this.detail.userId, //作者id
						beCommentUserId: 0, //被评论人id
						parentId: 0, //父id
					})

					uni.showToast({
						title:'操作成功',
						icon:'none'
					})
					this.commentText = ''
					this.$refs.paging.reload()
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
				}
			},

			//评论排序
			commentSortClick(item) {
				this.commentSort = item
			},

			//下拉刷新,上拉加载
			async queryList(pageNo, pageSize) {
				try {
					//获取动态详情
					const detailRes = await communityDetailApi({
						articleId: this.id,
					})
					console.log(detailRes)
					if(detailRes.data.fileName !== ''){
						detailRes.data.fileName = detailRes.data.fileName.split(',')
					}else{
						detailRes.data.fileName = []
					}
					this.detail = detailRes.data
					//获取是否关注
					const ifFollowRes = await userIfFollowApi({
						mid: detailRes.data.userId
					})
					this.ifFollow = ifFollowRes.data.is_follow
					// 获取评论list
					const commentRes = await communityCommentListApi({
						articleId: this.id,
						pageNum: pageNo,
						pageSize
					})
					this.commentNum = commentRes.count
					this.$refs.paging.complete(commentRes.data.data || []);

				} catch (e) {
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
					this.$refs.paging.complete(false);
					//TODO handle the exception
				}



				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
				// this.$request.queryList({
				// 	pageNo,
				// 	pageSize
				// }).then(res => {
				// 	//请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
				// 	this.$refs.paging.complete(res.data.list);
				// }).catch(res => {
				// 	//如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
				// 	//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				// 	//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				// 	this.$refs.paging.complete(false);
				// })
			},
			//跳转用户信息
			toUserInfo(){
				uni.navigateTo({
					url:'./userInfo?userId=' + this.detail.userId
				})
			},

			//查看图片
			previewImg(arr,index){
				previewImage(arr,index)
			},

			//关闭分享弹窗
			wechatPopupFun(item){
				this.wechatPopupShow = item
			},

			//关闭举报弹窗
			closeComplaint(){
				this.complaintShow = false
			},

		},
	};
</script>

<style lang="scss" scoped>
	::v-deep .zp-paging-container .zp-paging-container-content{
		margin-bottom: 100rpx;
	}
	.box {

		.navbar {}

		.head {
			justify-content: space-between;

			.head-right {

				.head-right-icon {
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: $uni-border-radius-circle;
					}
				}

				.head-right-name-time {

					.name {
						justify-content: space-between;
						font-size: $uni-font-size-lg;
						color: $uni-color-black;
						margin-bottom: 10rpx;

						image {
							margin-left: 18rpx;
							width: 34rpx;
							height: 34rpx;
							border-radius: $uni-border-radius-circle;
						}

					}

					.time {
						font-size: 22rpx;
						color: rgba(143, 144, 145, 1);
					}

				}

			}

			.head-left {
				justify-content: flex-end;

				.head-left-content {
					justify-content: center;
					width: 145rpx;
					height: 60rpx;
					border-radius: 30rpx;
					border: 2rpx solid rgba(51, 51, 51, 1);

					view {
						color: #333333;
						font-size: 22rpx;
					}

				}

				.head-left-content-succ {
					justify-content: center;
					width: 145rpx;
					height: 60rpx;
					border-radius: 30rpx;
					background-color: rgba(247, 247, 247, 1);

					view {
						color: rgba(178, 180, 181, 1);
						font-size: 22rpx;
					}

				}

			}

		}

		.content-text {
			margin: 60rpx 0 40rpx 0;
			color: $uni-text-color;
			font-size: $uni-font-size-lg;
			line-height: 60rpx;
			width: 100%;
			word-break: break-all;
		}

		.content-img-single {
			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
		}

		.content-img-multiple {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: left;
			flex-wrap: wrap;

			image {
				width: 216rpx;
				height: 216rpx;
				margin-left: 10rpx;
				margin-bottom: 10rpx;
				&:nth-child(3n+1){
					margin-left: 0;
				}
			}

		}

		.comment {
			margin-top: 80rpx;

			.comment-head {
				margin-bottom: 60rpx;
				justify-content: space-between;

				.comment-head-left {
					color: rgba(143, 144, 145, 1);
					font-size: $uni-font-size-base;

					text {
						margin-left: 20rpx;
					}
				}

				.comment-head-right {
					justify-content: space-around;
					width: 182rpx;
					height: 54rpx;
					background-color: rgba(247, 247, 247, 1);
					border-radius: 27rpx;
					font-size: 22rpx;
					color: rgba(179, 180, 181, 1);

					.comment-head-right-hot {
						height: 100%;
						width: 88rpx;
						justify-content: center;
						background-color: #FFFFFF;
						border-radius: 27rpx;
						color: $uni-color-black;
					}

					.comment-head-right-new {
						background-color: transparent;
						justify-content: center;
						color: rgba(179, 180, 181, 1);
					}

				}

			}

		}

		.bottom-input {
			width: 90%;
			position: fixed;
			bottom: 20rpx;

			justify-content: space-between;

			.input {
				width: 70%;
				height: 74rpx;
				padding-left: 40rpx;
				border-radius: 37rpx;
				background-color: rgba(247, 247, 247, 1);
				input {
					width: 90%;
					height: 100%;
				}
			}

			.bottom-input-right {

				padding: 24rpx 56rpx;
				border-radius: 36rpx;
				background-color: #3FD65F;
				font-size: $uni-font-size-sm;
				color: #FFFFFF;

				// color: rgba(179, 180, 181, 1);
				// font-size: $uni-font-size-sm;
				// padding-right: 40rpx;
				// image{
				// 	width: 50rpx;
				// 	height: 50rpx;
				// }

			}

		}

	}
</style>
